<style scoped>
.indent_detail .box {
  height: calc(100vh - 86px);
  overflow-y: scroll;
}
.indent_detail .small {
  padding-top: 5px;
  padding-bottom: 5px;
}
.indent_detail .small2 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.indent_detail .tk .top {
  margin-top: 46px;
  color: var(--theme);
  font-size: 18px;
}
.indent_detail >>> .van-field__body input,
.indent_detail >>> .van-field__body textarea {
  color: #a2a2a2;
}
.indent_detail .tk .blessing {
  margin: 20px 0;
  font-size: 14px;
  color: rgb(0, 186, 192);
}
.indent_detail .tk .msg {
  color: #a2a2a2;
  margin: 20px 0;
  font-size: 12px;
}
.indent_detail .way {
  display: flex;
}
.indent_detail .way .left {
  font-size: 12px;
  margin-right: 10px;
}
.indent_detail .way .right p {
  padding-bottom: 4px;
  font-size: 16px;
}
.indent_detail .way .right p:last-child {
  padding-bottom: 0px;
  font-size: 12px;
}
.indent_detail >>> .van-button--small {
  /* padding: */
  padding: 0 46px;
}
</style>
<template>
  <div class="indent_detail fixed">
    <van-nav-bar title="订单记录" left-arrow @click-left="$router.back()" />
    <div class="box">
      <van-cell-group>
        <van-cell title="订单编号:3454655" center>
          <template #right-icon>
            <span class="font12 f60">待抢中</span>
          </template>
        </van-cell>
        <van-cell center>
          <template #title>
            <span class="font12 pd_3_6 bgc_f60">即时</span>
          </template>
          <template #right-icon>
            <div class="times flex3 font12">
              <div class="day">2017年6月18日上午10:10</div>
              <!-- <div class="tim"></div> -->
            </div>
          </template>
        </van-cell>
        <van-steps
          direction="vertical"
          :active="0"
          active-icon="location"
          active-color="#FF8858"
          inactive-icon="location"
        >
          <van-step>
            <div class="way">
              <div class="left">起</div>
              <div class="right">
                <p class="p1">湖北省武汉市</p>
                <p class="p1">大冬瓜村大冬瓜村大冬瓜村</p>
              </div>
            </div>
          </van-step>
          <van-step>
            <div class="way">
              <div class="left">终</div>
              <div class="right">
                <p class="p1">湖北省武汉市</p>
                <p class="p1">大冬瓜村大冬瓜村大冬瓜村</p>
              </div>
            </div>
          </van-step>
        </van-steps>
        <van-cell class="small2" center>
          <template #title>
            <span class="font12 pd_3_6 bgc_a1">搬运</span>
            <span class="font12 pd_3_6 bgc_a1">回单</span>
            <span class="font12 pd_3_6 bgc_a1">返程</span>
          </template>
        </van-cell>
        <van-field class="small" label="订单车型" value="小面包车" readonly />
        <van-field
          class="small"
          label="联系人"
          value="张远（19382746571）"
          readonly
          right-icon="phone"
        />
        <van-field
          class="small"
          label="备注"
          value="暂无"
          rows="1"
          autosize
          type="textarea"
          readonly
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="已支付" center>
          <template #right-icon>
            <div class="money">
              <p class="font22" style="color: var(--theme)">￥130</p>
              <p style="color: #a1a1a1">价格明细></p>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell center :border="false" title="向客户收取" value="100元">
          <template #icon>
            <van-icon name="bill" color="var(--theme)" size="20px" />
          </template>
        </van-cell>
        <van-cell center :border="false" title="向趣拉拉支付" value="30元">
          <template #icon>
            <van-icon name="bill" color="var(--theme)" size="20px" />
          </template>
        </van-cell>
        <!-- <van-cell :border="false" title="单元格" icon="location-o" /> -->
      </van-cell-group>
      <van-cell-group>
        <van-cell class="small" :border="false">
          <template #title>
            <span class="font12">客户出价包含路费及额外需求</span>
          </template>
        </van-cell>
        <van-cell class="small" :border="false">
          <template #title>
            <span class="font12 f60"
              >注:告诉及停车场等费用,根据实际情况产生的金额,由客户支付</span
            >
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <van-button
      style="position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%"
      type="primary"
      color="#ff6600"
      @click="submit"
      >抢单</van-button
    >
    <!-- 弹框 -->
    <van-popup
      class="tk"
      round
      closeable
      v-model="show"
      :style="{ 'text-align': 'center', width: '60%', height: '30%' }"
    >
      <div class="top">恭喜你抢单成功!</div>
      <div class="blessing">😊祝您工作愉快!</div>
      <div class="msg">注意查看订单记录哦~</div>
      <van-button
        hairline
        size="small"
        color="var(--theme)"
        type="default"
        @click="tijiao"
        >确定</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    submit() {
      Toast.loading({
        message: "加速争取中...",
        forbidClick: true,
        duration: 500,
      });
      setTimeout(() => {
        this.show = true;
      }, 500);
    },
    tijiao() {
      this.show = false;
      this.$router.back();
    },
  },
};
</script>